<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
   	<script src="js/vue.min.js"></script>
   	<script src="js/vant.min.js"></script>
   	<script src="js/ajax.js"></script>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		
    </script>
</head>
<body>
	<div id="app">
		<van-nav-bar title="权限管理系统-用户管理" left-text="返回" left-arrow right-text="按钮"></van-nav-bar>
		<van-swipe :autoplay="3000">
			<van-swipe-item><img src="img/1.jpg"/ width="100%"></script></van-swipe-item>
			<van-swipe-item><img src="img/1.jpg"/ width="100%"></script></van-swipe-item>
			<van-swipe-item><img src="img/1.jpg"/ width="100%"></script></van-swipe-item>
		</van-swipe>
		<h2>无限列表显示用户信息</h2>
		<van-list v-model="loading" :finished="finished"  @load="loadData"> 
			<van-swipe-cell v-for="item in list" :right-width="65" :left-width="65" :on-close="onClose">
	                  <van-cell-group>
	                    <van-cell :title="item.Name" :value="item.id" />
	                  </van-cell-group>
	                  <span slot="right"><van-button type="danger" @click="delId(item)">删除</van-button></span>
	        </van-swipe-cell>
		</van-list>
		<van-tabbar v-model="active">
			<van-tabbar-item icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item icon="location">权限管理</van-tabbar-item>
			<van-tabbar-item icon="user-o">个人中心</van-tabbar-item>
		</van-tabbar>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				active:1,
				list: [],
				loading: false,
				finished: false,
				page:1,
				id:"",
			},
			methods: {
				loadData: function() {
					var _this=this;
					ajax({
						url:" http://stuapi.ysd3g.com/api/GetRoles",
						dataType:"jsonp",
						data:{
							token:"a344c022-8d61-4b53-a32c-02ff9660b1a7",
							page:_this.page,
							rows:10
						},
						success:function(res){
							if (res.rows.length == 0){
								_this.finished = true;  
								_this.loading=false;
								_this.$toast("服务器已经没有数据");
								return;
							}
							for(var i = 0; i < res.rows.length; i++) {
								_this.list.push(res.rows[i]);
							}
							_this.loading = false;	
							_this.page++;
							_this.$toast("此次加载"+res.rows.length+"条数据");
						}	
						
					})


				},
			  onClose: function(clickPosition, instance) {
                      switch (clickPosition) {
                    case 'left':
                    case 'cell':
                    case 'outside':
                          instance.close();
                          break;
                    case 'right':
                          this.$dialog.confirm({
                            message: '确定删除吗？'
                          }).then(() => {
                          	this.del();
                            instance.close();
                          });
                          break;
                      }
                },
                delId:function(item){
                	this.id=item.Id;
                },
                del:function(){
                	var _this=this;
                	ajax({
						url:" http://stuapi.ysd3g.com/api/DeleteRole",
						dataType:"jsonp",
						data:{
							token:"a344c022-8d61-4b53-a32c-02ff9660b1a7",
							roleId:_this.id,
						},
						success:function(res){
							if (res.success){
								_this.$toast("刪除成功");
								setTimeout(()=>{
									location.reload();
								},1000)
							}
							
						}	
					
					})
                },
			}
		});
	</script>
	
</body>
</html>